/*!
 * =====================================================
 * Ratchet v2.0.2 (http://goratchet.com)
 * Copyright 2014 Connor Sears
 * Licensed under MIT (https://github.com/twbs/ratchet/blob/master/LICENSE)
 *
 * v2.0.2 designed by @connors.
 * =====================================================
 */

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  height: 0;
  -moz-box-sizing: content-box;
       box-sizing: content-box;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}

legend {
  padding: 0;
  border: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td,
th {
  padding: 0;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
  line-height: 21px;
  color: #000;
  background-color: #fff;
}

a {
  color: #428bca;
  text-decoration: none;

  -webkit-tap-highlight-color: transparent;
}
a:active {
  color: #3071a9;
}

.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
}

.content > * {
  -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
          transform: translateZ(0);
}

.bar-nav ~ .content {
  padding-top: 44px;
}

.bar-header-secondary ~ .content {
  padding-top: 88px;
}

.bar-footer ~ .content {
  padding-bottom: 44px;
}

.bar-footer-secondary ~ .content {
  padding-bottom: 88px;
}

.bar-tab ~ .content {
  padding-bottom: 50px;
}

.bar-footer-secondary-tab ~ .content {
  padding-bottom: 94px;
}

.content-padded {
  margin: 10px;
}

.text-center {
  text-align: center;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.clearfix:before, .clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1;
}

h1, .h1 {
  font-size: 36px;
}

h2, .h2 {
  font-size: 30px;
}

h3, .h3 {
  font-size: 24px;
}

h4, .h4 {
  font-size: 18px;
}

h5, .h5 {
  margin-top: 20px;
  font-size: 14px;
}

h6, .h6 {
  margin-top: 20px;
  font-size: 12px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 14px;
  color: #777;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 6px 8px 7px;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #333;
  text-align: center;
  white-space: nowrap;
  vertical-align: top;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.btn:active, .btn.active {
  color: inherit;
  background-color: #ccc;
}
.btn:disabled, .btn.disabled {
  opacity: .6;
}

.btn-primary {
  color: #fff;
  background-color: #428bca;
  border: 1px solid #428bca;
}
.btn-primary:active, .btn-primary.active {
  color: #fff;
  background-color: #3071a9;
  border: 1px solid #3071a9;
}

.btn-positive {
  color: #fff;
  background-color: #5cb85c;
  border: 1px solid #5cb85c;
}
.btn-positive:active, .btn-positive.active {
  color: #fff;
  background-color: #449d44;
  border: 1px solid #449d44;
}

.btn-negative {
  color: #fff;
  background-color: #d9534f;
  border: 1px solid #d9534f;
}
.btn-negative:active, .btn-negative.active {
  color: #fff;
  background-color: #c9302c;
  border: 1px solid #c9302c;
}

.btn-outlined {
  background-color: transparent;
}
.btn-outlined.btn-primary {
  color: #428bca;
}
.btn-outlined.btn-positive {
  color: #5cb85c;
}
.btn-outlined.btn-negative {
  color: #d9534f;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
  color: #fff;
}

.btn-link {
  padding-top: 6px;
  padding-bottom: 6px;
  color: #428bca;
  background-color: transparent;
  border: 0;
}
.btn-link:active, .btn-link.active {
  color: #3071a9;
  background-color: transparent;
}

.btn-block {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 18px;
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
  width: 100%;
}

.btn .badge {
  margin: -2px -4px -2px 4px;
  font-size: 12px;
  background-color: rgba(0, 0, 0, .15);
}

.btn .badge-inverted,
.btn:active .badge-inverted {
  background-color: transparent;
}

.btn-primary:active .badge-inverted,
.btn-positive:active .badge-inverted,
.btn-negative:active .badge-inverted {
  color: #fff;
}

.btn-block .badge {
  position: absolute;
  right: 0;
  margin-right: 10px;
}

.btn .icon {
  font-size: inherit;
}

.bar {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 10;
  height: 44px;
  padding-right: 10px;
  padding-left: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;

  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.bar-header-secondary {
  top: 44px;
}

.bar-footer {
  bottom: 0;
}

.bar-footer-secondary {
  bottom: 44px;
}

.bar-footer-secondary-tab {
  bottom: 50px;
}

.bar-footer,
.bar-footer-secondary,
.bar-footer-secondary-tab {
  border-top: 1px solid #ddd;
  border-bottom: 0;
}

.bar-nav {
  top: 0;
}

.title {
  position: absolute;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 -10px;
  font-size: 17px;
  font-weight: 500;
  line-height: 44px;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.title a {
  color: inherit;
}

.bar-tab {
  bottom: 0;
  display: table;
  width: 100%;
  height: 50px;
  padding: 0;
  table-layout: fixed;
  border-top: 1px solid #ddd;
  border-bottom: 0;
}
.bar-tab .tab-item {
  display: table-cell;
  width: 1%;
  height: 50px;
  color: #929292;
  text-align: center;
  vertical-align: middle;
}
.bar-tab .tab-item.active, .bar-tab .tab-item:active {
  color: #428bca;
}
.bar-tab .tab-item .icon {
  top: 3px;
  width: 24px;
  height: 24px;
  padding-top: 0;
  padding-bottom: 0;
}
.bar-tab .tab-item .icon ~ .tab-label {
  display: block;
  font-size: 11px;
}

.bar .btn {
  position: relative;
  top: 7px;
  z-index: 20;
  padding: 6px 12px 7px;
  margin-top: 0;
  font-weight: 400;
}
.bar .btn.pull-right {
  margin-left: 10px;
}
.bar .btn.pull-left {
  margin-right: 10px;
}

.bar .btn-link {
  top: 0;
  padding: 0;
  font-size: 16px;
  line-height: 44px;
  color: #428bca;
  border: 0;
}
.bar .btn-link:active, .bar .btn-link.active {
  color: #3071a9;
}

.bar .btn-block {
  top: 6px;
  padding: 7px 0;
  margin-bottom: 0;
  font-size: 16px;
}

.bar .btn-nav.pull-left {
  margin-left: -5px;
}
.bar .btn-nav.pull-left .icon-left-nav {
  margin-right: -3px;
}
.bar .btn-nav.pull-right {
  margin-right: -5px;
}
.bar .btn-nav.pull-right .icon-right-nav {
  margin-left: -3px;
}

.bar .icon {
  position: relative;
  z-index: 20;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 24px;
}
.bar .btn .icon {
  top: 3px;
  padding: 0;
}
.bar .title .icon {
  padding: 0;
}
.bar .title .icon.icon-caret {
  top: 4px;
  margin-left: -5px;
}

.bar input[type="search"] {
  height: 29px;
  margin: 6px 0;
}

.bar .segmented-control {
  top: 7px;
  margin: 0 auto;
}

.badge {
  display: inline-block;
  padding: 2px 9px 3px;
  font-size: 12px;
  line-height: 1;
  color: #333;
  background-color: rgba(0, 0, 0, .15);
  border-radius: 100px;
}
.badge.badge-inverted {
  padding: 0 5px 0 0;
  background-color: transparent;
}

.badge-primary {
  color: #fff;
  background-color: #428bca;
}
.badge-primary.badge-inverted {
  color: #428bca;
}

.badge-positive {
  color: #fff;
  background-color: #5cb85c;
}
.badge-positive.badge-inverted {
  color: #5cb85c;
}

.badge-negative {
  color: #fff;
  background-color: #d9534f;
}
.badge-negative.badge-inverted {
  color: #d9534f;
}

.card {
  margin: 10px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.card .table-view {
  margin-bottom: 0;
  border-top: 0;
  border-bottom: 0;
}
.card .table-view .table-view-divider:first-child {
  top: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.card .table-view .table-view-divider:last-child {
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

.card .table-view-cell:last-child {
  border-bottom: 0;
}

.table-view {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 15px;
  list-style: none;
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.table-view-cell {
  position: relative;
  padding: 11px 65px 11px 15px;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
}
.table-view-cell:last-child {
  border-bottom: 0;
}
.table-view-cell > a:not(.btn) {
  position: relative;
  display: block;
  padding: inherit;
  margin: -11px -65px -11px -15px;
  overflow: hidden;
  color: inherit;
}
.table-view-cell > a:not(.btn):active {
  background-color: #eee;
}
.table-view-cell p {
  margin-bottom: 0;
}

.table-view-divider {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 15px;
  margin-top: -1px;
  margin-left: 0;
  font-weight: 500;
  color: #999;
  background-color: #fafafa;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.table-view .media,
.table-view .media-body {
  overflow: hidden;
}

.table-view .media-object.pull-left {
  margin-right: 10px;
}
.table-view .media-object.pull-right {
  margin-left: 10px;
}

.table-view-cell > .btn,
.table-view-cell > .badge,
.table-view-cell > .toggle,
.table-view-cell > a > .btn,
.table-view-cell > a > .badge,
.table-view-cell > a > .toggle {
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.table-view-cell .navigate-left > .btn,
.table-view-cell .navigate-left > .badge,
.table-view-cell .navigate-left > .toggle,
.table-view-cell .navigate-right > .btn,
.table-view-cell .navigate-right > .badge,
.table-view-cell .navigate-right > .toggle,
.table-view-cell .push-left > .btn,
.table-view-cell .push-left > .badge,
.table-view-cell .push-left > .toggle,
.table-view-cell .push-right > .btn,
.table-view-cell .push-right > .badge,
.table-view-cell .push-right > .toggle,
.table-view-cell > a .navigate-left > .btn,
.table-view-cell > a .navigate-left > .badge,
.table-view-cell > a .navigate-left > .toggle,
.table-view-cell > a .navigate-right > .btn,
.table-view-cell > a .navigate-right > .badge,
.table-view-cell > a .navigate-right > .toggle,
.table-view-cell > a .push-left > .btn,
.table-view-cell > a .push-left > .badge,
.table-view-cell > a .push-left > .toggle,
.table-view-cell > a .push-right > .btn,
.table-view-cell > a .push-right > .badge,
.table-view-cell > a .push-right > .toggle {
  right: 35px;
}

.content > .table-view:first-child {
  margin-top: 15px;
}

input,
textarea,
button,
select {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
}

select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"] {
  width: 100%;
  height: 35px;
  -webkit-appearance: none;
  padding: 0 15px;
  margin-bottom: 15px;
  line-height: 21px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  outline: none;
}

input[type="search"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 10px;
  font-size: 16px;
  border-radius: 20px;
}

input[type="search"]:focus {
  text-align: left;
}

textarea {
  height: auto;
}

select {
  height: auto;
  font-size: 14px;
  background-color: #f8f8f8;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
}

.input-group {
  background-color: #fff;
}

.input-group input,
.input-group textarea {
  margin-bottom: 0;
  background-color: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.input-row {
  height: 35px;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
}

.input-row label {
  float: left;
  width: 35%;
  padding: 8px 15px;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.1;
}

.input-row input {
  float: right;
  width: 65%;
  padding-left: 0;
  margin-bottom: 0;
  border: 0;
}

.segmented-control {
  position: relative;
  display: table;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.segmented-control .control-item {
  display: table-cell;
  width: 1%;
  padding-top: 6px;
  padding-bottom: 7px;
  overflow: hidden;
  line-height: 1;
  color: #333;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 1px solid #ccc;
}
.segmented-control .control-item:first-child {
  border-left-width: 0;
}
.segmented-control .control-item:active {
  background-color: #eee;
}
.segmented-control .control-item.active {
  background-color: #ccc;
}

.segmented-control-primary {
  border-color: #428bca;
}
.segmented-control-primary .control-item {
  color: #428bca;
  border-color: inherit;
}
.segmented-control-primary .control-item:active {
  background-color: #cde1f1;
}
.segmented-control-primary .control-item.active {
  color: #fff;
  background-color: #428bca;
}

.segmented-control-positive {
  border-color: #5cb85c;
}
.segmented-control-positive .control-item {
  color: #5cb85c;
  border-color: inherit;
}
.segmented-control-positive .control-item:active {
  background-color: #d8eed8;
}
.segmented-control-positive .control-item.active {
  color: #fff;
  background-color: #5cb85c;
}

.segmented-control-negative {
  border-color: #d9534f;
}
.segmented-control-negative .control-item {
  color: #d9534f;
  border-color: inherit;
}
.segmented-control-negative .control-item:active {
  background-color: #f9e2e2;
}
.segmented-control-negative .control-item.active {
  color: #fff;
  background-color: #d9534f;
}

.control-content {
  display: none;
}
.control-content.active {
  display: block;
}

.popover {
  position: fixed;
  top: 55px;
  left: 50%;
  z-index: 20;
  display: none;
  width: 280px;
  margin-left: -140px;
  background-color: #fff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .1);
          box-shadow: 0 0 15px rgba(0, 0, 0, .1);
  opacity: 0;
  -webkit-transition: all .25s linear;
     -moz-transition: all .25s linear;
          transition: all .25s linear;
  -webkit-transform: translate3d(0, -15px, 0);
      -ms-transform: translate3d(0, -15px, 0);
          transform: translate3d(0, -15px, 0);
}
.popover:before {
  position: absolute;
  top: -15px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -15px;
  content: '';
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
}
.popover.visible {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.popover .bar ~ .table-view {
  padding-top: 44px;
}

.backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  background-color: rgba(0, 0, 0, .3);
}

.popover .btn-block {
  margin-bottom: 5px;
}
.popover .btn-block:last-child {
  margin-bottom: 0;
}

.popover .bar-nav {
  border-bottom: 1px solid #ddd;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.popover .table-view {
  max-height: 300px;
  margin-bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
  border-top: 0;
  border-bottom: 0;
  border-radius: 6px;
}

.modal {
  position: fixed;
  top: 0;
  z-index: 11;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #fff;
  opacity: 0;
  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
     -moz-transition:    -moz-transform .25s, opacity 1ms .25s;
          transition:         transform .25s, opacity 1ms .25s;
  -webkit-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
.modal.active {
  height: 100%;
  opacity: 1;
  -webkit-transition: -webkit-transform .25s;
     -moz-transition:    -moz-transform .25s;
          transition:         transform .25s;
  -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.slider {
  width: 100%;
}

.slider {
  overflow: hidden;
  background-color: #000;
}
.slider .slide-group {
  position: relative;
  font-size: 0;
  white-space: nowrap;
  -webkit-transition: all 0s linear;
     -moz-transition: all 0s linear;
          transition: all 0s linear;
}
.slider .slide-group .slide {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 14px;
  vertical-align: top;
}

.toggle {
  position: relative;
  display: block;
  width: 74px;
  height: 30px;
  background-color: #fff;
  border: 2px solid #ddd;
  border-radius: 20px;
  -webkit-transition-duration: .2s;
     -moz-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transition-property: background-color, border;
     -moz-transition-property: background-color, border;
          transition-property: background-color, border;
}
.toggle .toggle-handle {
  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 2;
  width: 28px;
  height: 28px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 100px;
  -webkit-transition-duration: .2s;
     -moz-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transition-property: -webkit-transform, border, width;
     -moz-transition-property:    -moz-transform, border, width;
          transition-property:         transform, border, width;
}
.toggle:before {
  position: absolute;
  top: 3px;
  right: 11px;
  font-size: 13px;
  color: #999;
  text-transform: uppercase;
  content: "Off";
}
.toggle.active {
  background-color: #5cb85c;
  border: 2px solid #5cb85c;
}
.toggle.active .toggle-handle {
  border-color: #5cb85c;
  -webkit-transform: translate3d(44px, 0, 0);
      -ms-transform: translate3d(44px, 0, 0);
          transform: translate3d(44px, 0, 0);
}
.toggle.active:before {
  right: auto;
  left: 15px;
  color: #fff;
  content: "On";
}
.toggle input[type="checkbox"] {
  display: none;
}

.content.fade {
  left: 0;
  opacity: 0;
}
.content.fade.in {
  opacity: 1;
}
.content.sliding {
  z-index: 2;
  -webkit-transition: -webkit-transform .4s;
     -moz-transition:    -moz-transform .4s;
          transition:         transform .4s;
  -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.content.sliding.left {
  z-index: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
      -ms-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
.content.sliding.right {
  z-index: 3;
  -webkit-transform: translate3d(100%, 0, 0);
      -ms-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

.navigate-left:after,
.navigate-right:after,
.push-left:after,
.push-right:after {
  position: absolute;
  top: 50%;
  display: inline-block;
  font-family: Ratchicons;
  font-size: inherit;
  line-height: 1;
  color: #bbb;
  text-decoration: none;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);

  -webkit-font-smoothing: antialiased;
}

.navigate-left:after,
.push-left:after {
  left: 15px;
  content: '\e822';
}

.navigate-right:after,
.push-right:after {
  right: 15px;
  content: '\e826';
}

@font-face {
  font-family: Ratchicons;
  font-style: normal;
  font-weight: normal;

  src: url("../fonts/ratchicons.eot");
  src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg");
}
.icon {
  display: inline-block;
  font-family: Ratchicons;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;

  -webkit-font-smoothing: antialiased;
}

.icon-back:before {
  content: '\e80a';
}

.icon-bars:before {
  content: '\e80e';
}

.icon-caret:before {
  content: '\e80f';
}

.icon-check:before {
  content: '\e810';
}

.icon-close:before {
  content: '\e811';
}

.icon-code:before {
  content: '\e812';
}

.icon-compose:before {
  content: '\e813';
}

.icon-download:before {
  content: '\e815';
}

.icon-edit:before {
  content: '\e829';
}

.icon-forward:before {
  content: '\e82a';
}

.icon-gear:before {
  content: '\e821';
}

.icon-home:before {
  content: '\e82b';
}

.icon-info:before {
  content: '\e82c';
}

.icon-list:before {
  content: '\e823';
}

.icon-more-vertical:before {
  content: '\e82e';
}

.icon-more:before {
  content: '\e82f';
}

.icon-pages:before {
  content: '\e824';
}

.icon-pause:before {
  content: '\e830';
}

.icon-person:before {
  content: '\e832';
}

.icon-play:before {
  content: '\e816';
}

.icon-plus:before {
  content: '\e817';
}

.icon-refresh:before {
  content: '\e825';
}

.icon-search:before {
  content: '\e819';
}

.icon-share:before {
  content: '\e81a';
}

.icon-sound:before {
  content: '\e827';
}

.icon-sound2:before {
  content: '\e828';
}

.icon-sound3:before {
  content: '\e80b';
}

.icon-sound4:before {
  content: '\e80c';
}

.icon-star-filled:before {
  content: '\e81b';
}

.icon-star:before {
  content: '\e81c';
}

.icon-stop:before {
  content: '\e81d';
}

.icon-trash:before {
  content: '\e81e';
}

.icon-up-nav:before {
  content: '\e81f';
}

.icon-up:before {
  content: '\e80d';
}

.icon-right-nav:before {
  content: '\e818';
}

.icon-right:before {
  content: '\e826';
}

.icon-down-nav:before {
  content: '\e814';
}

.icon-down:before {
  content: '\e820';
}

.icon-left-nav:before {
  content: '\e82d';
}

.icon-left:before {
  content: '\e822';
}
/**
 * yue.css
 *
 * yue.css is designed for readable content.
 *
 * Copyright (c) 2013 - 2014 by Hsiaoming Yang.
 */

.yue {
  font: 400 18px/1.62 "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
  color: #444443;
}

.windows .yue {
  font-size: 16px;
  font-family: "Georgia", "SimSun", sans-serif;
}

.yue ::-moz-selection {
  background-color: rgba(0,0,0,0.2);
}

.yue ::selection {
  background-color: rgba(0,0,0,0.2);
}

.yue h1,
.yue h2,
.yue h3,
.yue h4,
.yue h5,
.yue h6 {
  font-family: "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", "SimSun", sans-serif;
  color: #222223;
}

.yue h1 {
  font-size: 1.8em;
  margin: 0.67em 0;
}

.yue > h1 {
  margin-top: 0;
  font-size: 2em;
}

.yue h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

.yue h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

.yue h4,
.yue h5,
.yue h6 {
  font-size: 1em;
  margin: 1.6em 0 1em 0;
}

.yue h6 {
  font-weight: 500;
}

.yue p {
  margin-top: 0;
  margin-bottom: 1.46em;
}

.yue a {
  color: #111;
  word-wrap: break-word;
  -moz-text-decoration-color: rgba(0, 0, 0, 0.4);
  text-decoration-color: rgba(0, 0, 0, 0.4);
}

.yue a:hover {
  color: #555;
  -moz-text-decoration-color: rgba(0, 0, 0, 0.6);
  text-decoration-color: rgba(0, 0, 0, 0.6);
}

.yue strong,
.yue b {
  font-weight: 700;
  color: #222223;
}

.yue em,
.yue i {
  font-style: italic;
  color: #222223;
}

.yue img {
  max-width: 100%;
  height: auto;
  margin: 0.2em 0;
}

.yue a img {
  /* Remove border on IE */
  border: none;
}

.yue figure {
  position: relative;
  clear: both;
  outline: 0;
  margin: 10px 0 30px;
  padding: 0;
  min-height: 100px;
}

.yue figure img {
  display: block;
  max-width: 100%;
  margin: auto auto 4px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.yue figure figcaption {
  position: relative;
  width: 100%;
  text-align: center;
  left: 0;
  margin-top: 10px;
  font-weight: 400;
  font-size: 14px;
  color: #666665;
}

.yue figure figcaption a {
  text-decoration: none;
  color: #666665;
}

.yue hr {
  display: block;
  width: 14%;
  margin: 40px auto 34px;
  border: 0 none;
  border-top: 3px solid #dededc;
}

.yue blockquote {
  margin: 0 0 1.64em 0;
  border-left: 3px solid #dadada;
  padding-left: 12px;
  color: #666664;
}

.yue blockquote a {
  color: #666664;
}

.yue ul,
.yue ol {
  margin: 0 0 24px 6px;
  padding-left: 16px;
}

.yue ul {
  list-style-type: square;
}

.yue ol {
  list-style-type: decimal;
}

.yue li {
  margin-bottom: 0.2em;
}

.yue li ul,
.yue li ol {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 14px;
}

.yue li ul {
  list-style-type: disc;
}

.yue li ul ul {
  list-style-type: circle;
}

.yue li p {
  margin: 0.4em 0 0.6em;
}

.yue .unstyled {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.yue code,
.yue tt {
  color: #808080;
  font-size: 0.96em;
  background-color: #f9f9f7;
  padding: 1px 2px;
  border: 1px solid #dadada;
  border-radius: 3px;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  word-wrap: break-word;
}

.yue pre {
  margin: 1.64em 0;
  padding: 7px;
  border: none;
  border-left: 3px solid #dadada;
  padding-left: 10px;
  overflow: auto;
  line-height: 1.5;
  font-size: 0.96em;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  color: #4c4c4c;
  background-color: #f9f9f7;
}

.yue pre code,
.yue pre tt {
  color: #4c4c4c;
  border: none;
  background: none;
  padding: 0;
}

.yue table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 1.5em;
  font-size: 0.96em;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.yue th,
.yue td {
  text-align: left;
  padding: 4px 8px 4px 10px;
  border: 1px solid #dadada;
}

.yue td {
  vertical-align: top;
}

.yue tr:nth-child(even) {
  background-color: #efefee;
}

.yue iframe {
  display: block;
  max-width: 100%;
  margin-bottom: 30px;
}

.yue figure iframe {
  margin: auto;
}

.yue table pre {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

@media (min-width: 1100px) {
  .yue blockquote {
    margin-left: -24px;
    padding-left: 20px;
    border-width: 4px;
  }

  .yue blockquote blockquote {
    margin-left: 0;
  }

  .yue figure img {
    margin: 0 0 4px;
  }

  .yue figure figcaption:before {
    width: 25%;
    margin-left: 75%;
    border-top: 1px solid #dededc;
    display: block;
    content: "";
    margin-bottom: 10px;
  }

  .yue figure figcaption {
    position: absolute;
    left: -172px;
    width: 150px;
    top: 0;
    text-align: right;
    margin-top: 0;
  }
}
.card{
    box-shadow: 0 0px 2px rgba(0,0,0,.15);
    -webkit-box-shadow:0 0px 2px rgba(0,0,0,.15);
    border-radius: 0;
    border: 1px solid rgba(0,0,0,.15);
    margin:15px 10px;
}
.bar{
    border-bottom:0;
    box-shadow:0 1px 4px rgba(0,0,0,.23);
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,.23);
}
.bar-nav{
    background-color:#23232e;
}
.bar-nav .title{color:#fff;}
.segmented-control{
    border-radius:0px;
}
.segmented-control .control-item{
    padding-top:9px;
    padding-bottom:10px;
}
.segmented-control .control-item.active{
    background-color:#333;
    color:#fff;
}
.bar .segmented-control{
    top:5px;
}
.bar .icon{
    padding:5px;
    margin-top:5px;
    font-size:26px;
    margin-right:-5px;
}
.navigate-right .media-object{
    max-width:25%;
}
.media-body h3{
    font-size:18px;
    font-weight:normal;
}
h1 .icon,h2 .icon,h3 .icon,h4 .icon{
    color:#777;
}
img{max-width:100%;}
/*
 * btn
 * ****************/
.btn-block{
    border-radius:2px;
    box-shadow:0 2px 5px rgba(0,0,0,.2);
    -webkit-box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.btn-primary{
    background-color:#1f8dd6;
    border-color:#1f8dd6;
}
body{
    -webkit-text-size-adjust:100%;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-touch-callout:none;
    word-break:break-word;
}
input,select,textarea{
    -webkit-user-select:auto;
    -webkit-appearance:none;
}
*, ::after, ::before {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}
input, textarea{
    -webkit-user-select: text;
    outline:none;
}
.content-pullin{
    padding:10px;
}
.v-center{
    position:relative;
    top:50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -o-transform:translateY(-50%);
}
/*===== S 页面框架 =====*/
.xpage,.xpage_inner{
    position:absolute;
    left:0;
    top:0;
    width: 100%;
    height:100%;
    overflow: hidden;
    z-index: 8;
    /*
    -webkit-transition-property: -webkit-transform;
    -webkit-transform-origin-x: 0;
    -webkit-transform-origin-y: 0;
    -webkit-transition-duration: 0ms;
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    */
}
.xpage_inner{
    background-color: #fff;
}
.xsection {
    position: absolute;
    left: 0;
    right: 0;
    top: 51px;
    bottom: 0;
}
/* 无header页面 */
.xpage1 .xsection{
    top:0;
}
.xscroll {
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
    -moz-overflow-scrolling: touch;
    -ms-overflow-scrolling: touch;
    -o-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
.xscrollx {
    overflow-y: hidden;
}
.xscrolly {
    overflow-x: hidden;
}

.xmask{
    position:absolute;
    z-index: 11;
    left:0;
    right:0;
    top:0;
    bottom:0;
    overflow: hidden;
    -webkit-backface-visibility:hidden;
}

.xpage,.xsection,.xaside,.xpopup{display: none;}
.current,.inmotion{display: block!important;}
.current{z-index: 9;}

.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.hide{
    display: none!important;
}
.yue {
    position: relative;
    z-index: 1;
}

/* 修复顶部带有Fixed导航锚点定位不准确问题 */
.yue h2,
.yue h3,
.yue h4,
.yue h5,
.yue h6 {
    position: relative;
/*    -webkit-background-clip:padding-box;
    -moz-background-clip:padding;
    background-clip:padding-box;
    border-top: 80px solid transparent;
    margin-top: -70px; */
}

/* ==========================================================================
   CSS 自动生成标题编号
   ========================================================================== */

/**
 * 传统中文排版有『章』『节』『卷』『篇』『辑』『集』『部』等概念，
 * 在网页排版中.yue.css 选取如下规则：
 * 第1级--------章--------1
 * 第2级--------节--------1.1
 * 第3级--------节--------1.1.1
 * 第4级--------节--------1.1.1.1
 * -----------------------条--------1.
 * -----------------------款--------1)
 * -----------------------项--------(1)
 * 所有标点均为西文标点
 * 需要注意的是「条」比「章」后面多了「.」，「章」亦可用汉字代替，例如：「一、」
 * Firefox 有私有属性分别实现简体和繁体的汉字编号，
   -moz-simp-chinese-formal(大写)/-moz-simp-chinese-informal(小写)，
   -moz-trad-chinese-formal(大写)/-moz-trad-chinese-informal(小写)，
   参照：http://lists.w3.org/Archives/Public/public-html-ig-zh/2010Sep/0011.html
   生成类似如下格式：

   壹、章
   ----壹之一、节
   ----壹之二、节

   贰、章
   ----贰之一、节
   ----贰之二、节
   --------贰之二之一、节
   --------贰之二之二、节

 * @doc: 《科技文献的章节编号方法》（CY/T35-2001）
 */

.yue h2:before,
.yue h3:before,
.yue h4:before,
.yue h5:before,
.yue h6:before {
    margin-right: .5em;
    color: #888;
}

.yue {
    counter-reset: chapter section subsection;
}

/* --------------------------------------------------------------------------
   标题自动生成编号
   -------------------------------------------------------------------------- */
/**
 * 提供从h2-h4 三个级别的标题序号
 * 最终生成如下格式编号：
        1.
        1.1
        1.1.1
 * 或者在容器上加上 class="cjk"
 * 将生成如下格式编号：
        一、
        1.1
        1.1.1
 */

/**
 * 一级标题（章）
 * 输出 1
 */
.yue h2 {
    counter-reset: section;
}

.yue h2:before {
    content: counter(chapter);
    counter-increment: chapter;
}

/**
 * 一级标题(汉字)
 * 输出 一、
 */

.cjk h2 {
    counter-increment: section;
}

.cjk h2:before {
    content: counter(chapter, cjk-ideographic)'、';
    content: counter(chapter, cjk-cjk-decimal)'、';
    margin-right: .25em;
}

/**
 * 二级标题（节）
 * 输出 1.1
 */
.yue h3 {
    counter-reset: subsection;
}

.yue h3:before {
    content: counter(chapter) "." counter(section);
    counter-increment: section;
}

/**
 * 三级标题（子节）
 * 输出 1.1.1
 */
.yue h4:before {
    content: counter(chapter) "." counter(section) "." counter(subsection);
    counter-increment: subsection;
}



/**
 * 移动端阅读优化
 */

@media (max-width: 800px) {
    .yue {
        font-size: 16px;
    }
}
.hint{
    background: #03a9f4;
    padding: 0.3em 1em;
    color: #eee;
    margin:15px 10px;
    box-shadow:0 2px 5px rgba(0,0,0,.2);
    -webkit-box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.hint p{
    margin-bottom:1px;
    color:#eee;
}
.hint a{
    color:#fff;
}
.hint-title{
    margin-bottom:8px;
    padding-bottom:2px;
}
.hint-title .icon{
    margin-right:4px;
    font-size:22px;
    vertical-align:-2px;
}
.supports3d .xo_page,.supports3d .xo_aside,.supports3d .xo_popup,.supports3d .xo_mask{
    -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 900;
    -webkit-transform-style: preserve-3d;
}
.xo_loader{
    position:absolute;
    z-index: 12;
    left:0;
    right:0;
    top:0;
    bottom:0;
    overflow: hidden;
}
.xo_loader_animate {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin: -12px 0 0 -65px; 
}
.xo_loader_animate span { 
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 0 10px;
    background:#1d7ad9; 
    border-radius: 50px; 
    -webkit-animation: loader 0.9s infinite alternate; 
    animation: loader 0.9s infinite alternate; 
}
.xo_loader.hide .xo_loader_animate span{
    -webkit-animation: none; 
    animation: none; 
}
.xo_loader_animate span:nth-of-type(2) { 
    -webkit-animation-delay: 0.3s; 
    animation-delay: 0.3s; 
}
.xo_loader_animate span:nth-of-type(3) { 
    -webkit-animation-delay: 0.6s; 
    animation-delay: 0.6s; 
}

@-webkit-keyframes loader {
    0% { 
        width: 10px; 
        height: 10px; 
        opacity: 0.8; 
        -webkit-transform: translateY(0);
    }
    100% { 
        width: 24px;
        height: 24px;
        opacity: 0.1;
        -webkit-transform: translateY(-21px);
    }
}
@keyframes loader {
    0% { 
        width: 10px;
        height: 10px;
        opacity: 0.8;
        transform: translateY(0);
    }
    100% { 
        width: 24px;
        height: 24px;
        opacity: 0.1;
        transform: translateY(-21px);
    }
}
.xo_logger{position: fixed;z-index:100;bottom:0;left:0;right:0;height:100px;background: #000;color:#94c849;font-size:12px;line-height: 14px;border-top-left-radius:2px;border-top-right-radius:2px;box-shadow: 0 -2px 2px;}
.xo_logger_bd{position: absolute;top:10px;left:10px;right:10px;bottom:10px;overflow: auto;-webkit-overflow-scrolling: touch;}
.xo_logger_txt{color:#ff9900;margin-bottom: 5px;}
.in, .out, .inmotion {
    -webkit-animation-duration: 350ms;
    -webkit-animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;/*cubic-bezier(.645,.045,.355,1);ease-in-out*/;
}
.in,.back-out {
    z-index: 10;
}
.out {
    z-index: 0 !important;
}
/* Fade */

.fade.in {
    -webkit-animation-name: fadeIn;
}

.fade.out {
    z-index: 10;
    -webkit-animation-name: fadeOut;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    } 
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    } 
    100% {
        opacity: 0;
    }
}



/* Disolve */

.dissolve.in {
    -webkit-animation-name: dissolveIn;
}

.dissolve.out {
    -webkit-animation-name: dissolveOut;
}

@-webkit-keyframes dissolveIn {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 0;
    } 
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes dissolveOut {
    5% {
        opacity: 1;
    } 
    100% {
        opacity: 0;
    }
}



/* #Popin' */

.pop.in {
    -webkit-animation-name: popIn;
}

.pop.out {
    -webkit-animation-name: popOut;
}

@-webkit-keyframes popIn {
    0% {
        opacity: 0;
    }
    5% {
        -webkit-transform: scale(.2);
        opacity: 0;
    } 
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes popOut {
    5% {
        -webkit-transform: scale(1);
        opacity: 1;
    } 
    100% {
        -webkit-transform: scale(.2);
        opacity: 0;
    }
}



/* Slide Left */

.slideleft.in {
    -webkit-animation-name: slideLeftIn;
}

.slideleft.out {
    -webkit-animation-name: slideLeftOut;
}

@-webkit-keyframes slideLeftIn {
    0% {
        -webkit-transform: translate3d(100%,0,0);
        /*-webkit-transform: translateX(90%);*/
    } 
    100% {
        -webkit-transform: translate3d(0,0,0);
        /*-webkit-transform: translateX(0);*/
    }
}

@-webkit-keyframes slideLeftOut {
    0% {
        -webkit-transform: translate3d(0,0,0);
        /*-webkit-transform: translateX(-10%);*/
    } 
    100% {
        -webkit-transform: translate3d(-100%,0,0);
        /*-webkit-transform: translateX(-100%);*/
    }
}



/* Slide Right */

.slideright.in {
    -webkit-animation-name: slideRightIn;
}

.slideright.out {
    -webkit-animation-name: slideRightOut;
}

@-webkit-keyframes slideRightIn {
    0% {
        -webkit-transform: translate3d(-100%,0,0);
        /*-webkit-transform: translateX(-90%);*/
    } 
    100% {
        -webkit-transform: translate3d(0,0,0);
        /*-webkit-transform: translateX(0);*/
    }
}

@-webkit-keyframes slideRightOut {
    0% {
        -webkit-transform: translate3d(0,0,0);
        /*-webkit-transform: translateX(0);*/
    } 
    100% {
        -webkit-transform: translate3d(100%,0,0);
        /*-webkit-transform: translateX(100%);*/
    }
}


/* Slide Up */

.slideup.in {
    -webkit-animation-name: slideUpIn;
}
.slideup.out {
    -webkit-animation-name: slideUpOut;
}

@-webkit-keyframes slideUpIn {
    20% {
        -webkit-transform: translateY(80%);
    }
    100% {
        -webkit-transform: translateY(0%);
    }
}

@-webkit-keyframes slideUpOut {
    20% {
        -webkit-transform: translateY(-20%);
    } 
    100% {
        -webkit-transform: translateY(-100%);
    }
}



/* Slide Down */

.slidedown.in {
    -webkit-animation-name: slideDownIn;
}
.slidedown.out {
    -webkit-animation-name: slideDownOut;
}

@-webkit-keyframes slideDownIn {
    0% {
        -webkit-transform: translateY(-80%);
    } 
    100% {
        -webkit-transform: translateY(0%);
    }
}

@-webkit-keyframes slideDownOut {
    0% {
        -webkit-transform: translateY(20%);
    } 
    100% {
        -webkit-transform: translateY(100%);
    }
}

/* Flip Left */

.flipleft {
    -webkit-backface-visibility: hidden;
}

.flipleft.in {
    -webkit-animation-name: flipLeftIn;
}

.flipleft.out {
    -webkit-animation-name: flipLeftOut;
}

@-webkit-keyframes flipLeftIn {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
        -webkit-transform: rotateY(180deg) scale(.8);
    } 
    100% {
        -webkit-transform: rotateY(0deg) scale(1);
    }
}

@-webkit-keyframes flipLeftOut {
    5% {
        -webkit-transform: rotateY(0deg) scale(1);
    } 
    100% {
        -webkit-transform: rotateY(-180deg) scale(.8);
    }
}



/* Flip Right */

.flipright {
    -webkit-backface-visibility: hidden;
}

.flipright.in {
    -webkit-animation-name: flipRightIn;
}

.flipright.out {
    -webkit-animation-name: flipRightOut;
}

@-webkit-keyframes flipRightIn {
    0% {
        opacity: 0;
    }
    5% {
        -webkit-transform: rotateY(-180deg) scale(.8);
    } 
    100% {
        -webkit-transform: rotateY(0deg) scale(1);
    }
}

@-webkit-keyframes flipRightOut {
    5% {
        -webkit-transform: rotateY(0deg) scale(1);
    } 
    100% {
        -webkit-transform: rotateY(180deg) scale(.8);
    }
}



/* Swap Right */

.swapright {
    -webkit-animation-duration: .7s;
    -webkit-transform: perspective(800);
    -webkit-animation-timing-function: ease-out;
}
.swapright.in {
    -webkit-animation-name: swapRightIn;
}
.swapright.out {
    -webkit-animation-name: swapRightOut;
}

@-webkit-keyframes swapRightIn {
    0% {
        opacity: 0;
    }
    5% {
        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
        opacity: 0;
    }
    35% {
        -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
        opacity: 1;
    }
    95% {
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes swapRightOut {
    5% {
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
        opacity: 1;
    }
    35% {
        -webkit-transform:  translate3d(180px, 0px, -400px) rotateY(-20deg);
        opacity: .5;
    }
    95% {
        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
        opacity: 0;
    }
}

/* Swap Left */

.swapleft {
    -webkit-animation-duration: .7s;
    -webkit-transform: perspective(800);
    -webkit-animation-timing-function: ease-out;
}
.swapleft.in {
    -webkit-animation-name: swapLeftIn;
}
.swapleft.out {
    -webkit-animation-name: swapLeftOut;
}

@-webkit-keyframes swapLeftIn {
    0% {
        opacity: 0;
    }
    5% {
        -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
        opacity: 0;
    }
    35% {
        -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
        opacity: 1;
    }
    95% {
        opacity: 1;
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
    }
}

@-webkit-keyframes swapLeftOut {
    5% {
        -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
        opacity: 1;
    }
    35% {
        -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
        opacity: .5;
    }
    95% {
        -webkit-transform:  translate3d(0px, 0px, -800px) rotateY(70deg);
        opacity: 0;
    }
}


/* Cubes */
/* Cube Left */

/* Unfortunately, to acheive a proper cube effect,
// we need the page width. Assuming 320px here.
*/
.cubeleft.in,.cubeleft.out,.cuberight.in,.cuberight.out{
    -webkit-animation-duration: .6s;
    -webkit-transform: perspective(800);
}
.cubeleft.in {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation-name: cubeLeftIn;
}

.cubeleft.out {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation-name: cubeLeftOut;    
}

@-webkit-keyframes cubeLeftIn {
    0% {
        opacity: 0;
    }
    5% {
        -webkit-transform: rotateY(90deg) translateZ(320px);
        opacity: .5;
    }
    95% {
        -webkit-transform: rotateY(0deg) translateZ(0) translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes cubeLeftOut {
    5% {
        -webkit-transform: rotateY(0deg) translateZ(0) translateX(0);
        opacity: 1;
    }
    95% {
        -webkit-transform: rotateY(-90deg) translateZ(320px);
        opacity: .5;
    }
}

/* Cube Right */

.cuberight.in {
    -webkit-transform-origin: 100% 50%;
    -webkit-animation-name: cubeRightIn;
}

.cuberight.out {
    -webkit-transform-origin: 0% 50%;
    -webkit-animation-name: cubeRightOut;    
}

@-webkit-keyframes cubeRightIn {
    0% {
        opacity: 0;
    }
    5% {
        -webkit-transform: rotateY(-90deg) translateZ(320px);
        opacity: .5;
    }
    95% {
        -webkit-transform: rotateY(0deg) translateZ(0) translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes cubeRightOut {
    5% {
        -webkit-transform: rotateY(0deg) translateZ(0) translateX(0);
        opacity: 1;
    }
    95% {
        -webkit-transform: rotateY(90deg) translateZ(320px);
        opacity: .5;
    }
}

.pokerleft,.pokerright{-webkit-animation-duration: .6s;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;}
.pokerleft.in{-webkit-animation-name:phoneSlideIn;animation-name:phoneSlideIn}
.pokerleft.out{-webkit-animation-name:phoneSlideOut;animation-name:phoneSlideOut}
.pokerright.in{-webkit-animation-name:phoneSlideBackIn;animation-name:phoneSlideBackIn}
.pokerright.out{-webkit-animation-name:phoneSlideBackOut;animation-name:phoneSlideBackOut}
.pokercoverup,.pokercoverdown{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;}
.pokercoverdown.in{-webkit-animation-name:phoneCoverIn;animation-name:phoneCoverIn}
.pokercoverdown.out{-webkit-animation-name:phoneCoverOut;animation-name:phoneCoverOut}
.pokercoverup.in{-webkit-animation-name:phoneCoverBackIn;animation-name:phoneCoverBackIn}
.pokercoverup.out{-webkit-animation-name:phoneCoverOutBack;animation-name:phoneCoverOutBack}
@-webkit-keyframes phoneSlideOut{
    0%{-webkit-transform:translateZ(0);}
    100%{-webkit-transform:rotateY(-20deg);opacity:.25;}
}
@keyframes phoneSlideOut{
    0%{transform:translateZ(0);}
    100%{transform:rotateY(-20deg);opacity:.25;}
}
@-webkit-keyframes phoneSlideIn{
    0%{-webkit-transform:translateX(110%);}
    100%{-webkit-transform:translateX(0);}
}
@keyframes phoneSlideIn{
    0%{transform:translateX(110%);}
    100%{transform:translateX(0);}
}
@-webkit-keyframes phoneSlideBackOut{
    0%{-webkit-transform:rotateY(-20deg);opacity:.25;}
    100%{-webkit-transform:translateZ(0);}
}
@keyframes phoneSlideBackOut{
    0%{transform:rotateY(-20deg);opacity:.25;}
    100%{transform:translateZ(0);}
}
@-webkit-keyframes phoneSlideBackIn{
    0%{-webkit-transform:translateX(-110%);}
    100%{-webkit-transform:translateX(0);
}
@keyframes phoneSlideBackIn{
    0%{transform:translateX(-110%);}
    100%{transform:translateX(0);
}
@-webkit-keyframes phoneCoverOut{
    0%{-webkit-transform:translateZ(0);}
    100%{-webkit-transform:rotateX(15deg);opacity:.25;}
}
@keyframes phoneCoverOut{
    0%{transform:translateZ(0);}
    100%{transform:rotateX(15deg);opacity:.25;}
}
@-webkit-keyframes phoneCoverIn{
    0%{-webkit-transform:translateY(110%);}
    100%{-webkit-transform:translateY(0);}
}
@keyframes phoneCoverIn{
    0%{transform:translateY(110%);}
    100%{transform:translateY(0);}
}
@-webkit-keyframes phoneCoverOutBack{
    0%{-webkit-transform:translateY(0);}
    100%{-webkit-transform:translateY(110%);}
}
@keyframes phoneCoverOutBack{
    0%{transform:translateY(0);}
    100%{transform:translateY(110%);}
}
@-webkit-keyframes phoneCoverBackIn{
    0%{-webkit-transform:rotateX(15deg);opacity:.25;}
    100%{-webkit-transform:translateZ(0);}
}
@keyframes phoneCoverBackIn{
    0%{transform:rotateX(15deg);opacity:.25;}
    100%{transform:translateZ(0);}
}
